<template>
	<view class="textarea">
		<view class="title">我的奢品（{{info.currentArr.length}}/{{info.max}}）</view>
		<view class="flex flex-wrap-w">
			<view class="font-24 tabs flex flex-jc-c flex-ai-c" v-for="(item,i) in info.currentArr" :key="i" @click="del(item,i)">
				<view style="margin-right: 10rpx;">{{item}}</view>
				<view class="flex flex-ai-c"><u-icon name="close" size="13rpx" /></view>
			</view>
		</view>
		<u-checkbox-group width="33.3%" :max="info.max">
			<u-checkbox ref="checkbox" :disabled="item.disabled" active-color="#333333" shape="circle"
				@change="(e) => checkboxChange(e,index)" v-model="item.checked" v-for="(item, index) in info.arr"
				:key="index" :name="item.luxury">{{item.luxury}}</u-checkbox>
		</u-checkbox-group>
	</view>
	<view style="height: 160rpx;"></view>
	<view class="btn" @click="editMemberInfo">
		保 存
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive, watch
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import common from '../../api/common'
	import user from '../../api/user'
	let info = reactive({
		arr: [],
		max: 5,
		currentArr: [],
		id: null,
		newCurrentArr: []
	})
	watch(() => info.currentArr, (newArr) => {
		if (newArr.length >= info.max) {
			info.arr.map(v => {
				if (!v.checked) {
					v.disabled = true
				}
			})
		} else {
			info.arr.map(v => {
				v.disabled = false
			})
		}
	}, { deep: true })
	
	// 选中某个复选框时，由checkbox时触发
	const checkboxChange = (e : any, i : number) => {
		let text = e.name
		if (info.currentArr.includes(text)) {
			let index = info.currentArr.findIndex(v => v == text)
			info.currentArr.splice(index, 1)
		} else {
			if (info.currentArr.length >= info.max) {
				return uni.showToast({
					title: '超出限制',
					icon: 'none'
				})
			}
			info.currentArr = [...info.currentArr, text]
		}
	}
	const editMemberInfo = () => {
		uni.showLoading()
		user.editMemberInfo({
			my_luxury: info.currentArr,
			id: info.id
		}).then((res) => {
			if (res.code === 200) {
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.value = {
					arr: info.currentArr,
					type: 10
				}
				uni.navigateBack()
			} else {
				uni.showToast({
					title: '保存失败',
					icon: 'none'
				})
			}
			uni.hideLoading()
		}).catch(() => {
			uni.hideLoading()
			uni.showToast({
				title: '保存失败',
				icon: 'none'
			})
		})

	}
	const getLuxury = async () => {
		const res = await common.getLuxury()
		if (res.code === 200) {
			info.arr = res.data
			for (let i = 0; i < info.arr.length; i++) {
				info.arr[i].checked = false
				info.arr[i].disabled = false
			}
			
			setTimeout(() => {
				info.currentArr = info.newCurrentArr
				for(let i in info.arr) {
					for(let j in info.currentArr){
						if(info.arr[i].luxury == info.currentArr[j]) {
							info.arr[i].checked = true
							
						}
					}
				}
			},500)
		}

	}
	const del = (item,i) => {
		for(let i in info.arr){
			if(info.arr[i].luxury == item) {
				info.arr[i].checked = false
			}
	
		}
		info.currentArr.splice(i,1)
	}
	onLoad((op) => {
		info.id = op.id
		uni.$once('info', (v : any) => {
			info.newCurrentArr = v
		})

		getLuxury()
	})
</script>
<style>
	page {
		border: 1px solid #fff;
	}
</style>
<style lang="scss">
	:deep(.u-checkbox) {
		padding: 55rpx 0;
		border-bottom: 1rpx solid #F8F8F8;
	}

	.tabs {
		padding: 17rpx 22rpx;
		position: relative;
		height: 58rpx;
		background: #333333;
		border-radius: 30rpx;
		color: #fff;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
	}

	.choose {
		margin-top: 30rpx;
	}

	.btn {
		position: fixed;
		bottom: 79rpx;
		width: calc(100% - 74rpx);
		left: 37rpx;
		height: 78rpx;
		background: #000000;
		border-radius: 39rpx;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 78rpx;
	}

	.textarea {
		position: relative;
		margin: 0 32rpx;

		.title {
			font-weight: 600;
			font-size: 30rpx;
			color: #333333;
			margin: 44rpx 0 30rpx;
		}
	}
</style>